<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="o-lsy-content-container h-full">
    <el-scrollbar
      ref="elScrollRef"
      view-class="h-full"
      @scroll="onScrollWrapper"
    >
      <div class="flex flex-col" :class="`${fitAllContent ? 'h-full' : ''}`">
        <div :class="fitAllContent ? 'flex-shrink-0' : ''">
          <el-card v-if="title || desc" shadow="never">
            <h2 class="text-xl font-bold flex flex-row relative">
              <span>{{ title }}</span>
              <span
                v-if="features"
                class="cursor-pointer pl-2 pr-2"
                @click="onToggleDialogVisible"
              >
                <el-icon :size="14" class="absolute bottom-0.5">
                  <SvgIcon name="info"></SvgIcon>
                </el-icon>
              </span>
            </h2>

            <p class="text-gray-400" v-html="desc"></p>
          </el-card>
        </div>
        <div
          ref="contentDomRef"
          class="u-fix-bfc"
          :class="[...contentDomClsComp, fitAllContent ? 'flex-1 h-0' : '']"
        >
          <slot v-if="visible"></slot>
        </div>
        <el-dialog
          v-model="dialogVisible"
          title="特点/细节说明"
          modal-class="o-lsy-dialog"
        >
          <ul class="list-disc pl-4">
            <li v-for="item in features" :key="item">{{ item }}</li>
          </ul>
        </el-dialog>
      </div>
    </el-scrollbar>
    <LsyBackTopAffix
      v-if="enableBackTopComp"
      :show="systemAffixShow"
      @click="onScrollToTop"
    ></LsyBackTopAffix>
    <LsyToc v-if="enableToc" :content-root-dom="contentDomRef"></LsyToc>
  </div>
</template>

<script setup>
import { useRecoverElScrollbarPosition } from '../../hooks/RecoverScrollPositionHook'
import { ElScrollbar } from 'element-plus'
import { computed, toRefs, ref } from 'vue'
defineOptions({ name: 'LsyContentContainer' })
// eslint-disable-next-line no-unused-vars
const props = defineProps({
  fitAllContent: {
    type: Boolean,
    default: true,
  },
  usePadding: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: undefined,
  },
  desc: {
    type: String,
    default: undefined,
  },
  features: {
    type: Array,
    default: undefined,
  },
  enableToc: {
    type: Boolean,
    default: false,
  },
  enableBackTopComp: {
    type: Boolean,
    default: false,
  },
  contentDomCls: {
    type: Array,
    default: undefined,
  },
  lazyRenderContent: {
    type: Boolean,
    default: false,
  },
})

const { usePadding, contentDomCls, lazyRenderContent } = toRefs(props)
const paddingClsArr = computed(() => {
  const retArr = []
  if (usePadding.value) {
    retArr.push('p-3')
  }
  return retArr
})

const contentDomClsComp = computed(() => {
  const ret = []
  if (typeof contentDomCls.value === 'string' && contentDomCls.value) {
    ret.push(contentDomCls.value)
  } else if (contentDomCls.value instanceof Array) {
    ret.push(...contentDomCls.value)
  }
  ret.push(...paddingClsArr.value)
  return ret
})
const elScrollRef = ref()
const { onScroll } = useRecoverElScrollbarPosition(elScrollRef)
const systemAffixShow = ref(false)
function onScrollWrapper({ scrollLeft, scrollTop }) {
  onScroll({ scrollLeft, scrollTop })
  if (scrollTop && scrollTop > 500) {
    systemAffixShow.value = true
  } else {
    systemAffixShow.value = false
  }
}

const visible = ref(lazyRenderContent.value ? false : true)
if (lazyRenderContent.value) {
  requestAnimationFrame(() => {
    visible.value = true
  })
}
const contentDomRef = ref()

const dialogVisible = ref(false)
function onToggleDialogVisible() {
  dialogVisible.value = !dialogVisible.value
}
function onScrollToTop() {
  elScrollRef.value?.scrollTo({ top: 0, behavior: 'smooth' })
}
defineExpose({ elScrollRef })
</script>

<style lang="scss" scoped>
.o-lsy-content-container {
  will-change: transform, opacity;
}
</style>
